<template>
  <div class="container">
    <div
      class="sectionA"
      v-for="(section, index) in item.sectionA"
      :key="index"
    >
      <div class="title">&nbsp&nbsp{{ section.title }}</div>
      <div class="question">&nbsp&nbsp{{ section.question }}</div>
    </div>
    <div
      class="sectionB"
      v-for="(section, index) in item.sectionB"
      :key="index"
    >
      <div class="title">&nbsp&nbsp{{ section.title }}</div>
      <div class="question">&nbsp&nbsp{{ section.question }}</div>
    </div>
    <div
      class="sectionC"
      v-for="(section, index) in item.sectionC"
      :key="index"
    >
      <div class="title">&nbsp&nbsp{{ section.title }}</div>
      <div class="question">&nbsp&nbsp{{ section.question }}</div>
    </div>
    <div class="answer">
      <van-field
        :value="answer"
        @change="(e) => (answer = e.mp.detail)"
        clearable
        placeholder="请输入答案"
        adjust-position
        bind:click-icon="onClickIcon"
      />
      <van-button square type="primary" custom-style="width:100%" @click="check"
        >提交</van-button
      >
    </div>
  </div>
</template>

<script>
import request from "../../../utils/request";
const innerAudioContext = wx.createInnerAudioContext();

export default {
  data() {
    return {
      item: {},
      audio: "",
    };
  },

  onLoad: function (option) {
    this.getDetail(option.id);
    innerAudioContext.autoplay = true;
    innerAudioContext.loop = false;
    innerAudioContext.src = this.audio;
    innerAudioContext.play();
  },

  methods: {
    async getDetail(id) {
      let response = await request({
        url: `/exam_service/listening/getListeningDetail/${id}`,
        method: "GET",
      });

      this.item = response.data.item;
      this.audio = this.item.listening.audio;
    },
    async check() {
      let match = "";

      console.log(1);
      for (var i = 0; i < this.item.sectionA.length; i++) {
        match += this.item.sectionA[i].answer;
      }
      for (var i = 0; i < this.item.sectionB.length; i++) {
        match += this.item.sectionB[i].answer;
      }
      for (var i = 0; i < this.item.sectionC.length; i++) {
        match += this.item.sectionC[i].answer;
      }

      console.log(match);
      wx.navigateTo({
        url: "/pages/result/main?answer=" + this.answer + "&match=" + match,
      });
    },
  },
};
</script>

<style>
.container {
  position: relative;
  height: 100%;
}
.answer {
  position: absolute;
  bottom: 0;
  display: inline-block;
  width: 100%;
}
</style>
